<script setup lang="ts">
import { h, ref } from "vue"
import { useMessage, NButton, NDataTable } from "naive-ui"
import { getCateList, deleteCate, updateCate, createCate } from "@api/index"
import createType from "./components/createType.vue"
import pagination from "@/components/pagination.vue"
import { getStorage } from "@/util/cache"
const orgId = getStorage("orgId")

const showModal = ref(false)
const message = useMessage()
const editConfig = ref({
  isEdit: false,
  echoData: {},
})
const pageConfig = ref({
  page: 1,
  pageSize: 10,
})
const pageTotal = ref(0)
const cateList: any = ref([])
const handleGetCateList = (data: any) => {
  getCateList({ ...data, orgId }).then((res: any) => {
    cateList.value = res.data.list
    pageTotal.value = res.data?.totalCount
  })
}
handleGetCateList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })

const columns = [
  {
    title: "分类ID",
    key: "cateId",
  },
  {
    title: "分类名字",
    key: "cateName",
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "更新时间",
    key: "updateTime",
  },
  {
    title: "操作",
    key: "action",
    render(row: any) {
      return [
        h(
          NButton,
          {
            size: "small",
            onClick: () => {
              showModal.value = true
              editConfig.value.isEdit = true
              editConfig.value.echoData = row
            },
          },
          { default: () => "编辑" }
        ),
        h(
          NButton,
          {
            size: "small",
            onClick: () => {
              handleDeleteCate([row?.cateId])
            },
          },
          { default: () => "删除" }
        ),
      ]
    },
  },
]

const handleOpenModal = () => {
  showModal.value = true
}

//弹窗确认
const modalSubmit = (data: any) => {
  createCate({ ...data, orgId }).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetCateList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
  })
  showModal.value = false
  editConfig.value.isEdit = false
  editConfig.value.echoData = {}
}
//弹窗关闭
const modalClose = () => {
  showModal.value = false
  editConfig.value.isEdit = false
  editConfig.value.echoData = {}
}
//删除分类
const handleDeleteCate = (data: any) => {
  deleteCate(data).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetCateList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
  })
}

//编辑分类
const handleUpdateCate = (data: any) => {
  updateCate({ ...data, orgId }).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetCateList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
    showModal.value = false
    editConfig.value.isEdit = false
    editConfig.value.echoData = {}
  })
}

//分页
const handleChangePage = () => {
  handleGetCateList({
    limit: pageConfig.value.pageSize,
    page: pageConfig.value.page,
  })
}
</script>

<template>
  <div class="index">
    <div class="table">
      <div class="table_action">
        <n-button attr-type="button" @click="handleOpenModal"> 新增分类 </n-button>
      </div>
      <n-data-table :columns="columns" :data="cateList" :pagination="false" :bordered="false" />
      <pagination :pageTotal="pageTotal" :pageConfig="pageConfig" :handleChangePage="handleChangePage" />
    </div>
    <createType :handleUpdateCate="handleUpdateCate" :showModal="showModal" :modalSubmit="modalSubmit"
      :modalClose="modalClose" :editConfig="editConfig" />
  </div>
</template>

<style lang="scss" scoped>
.index {
  overflow-y: scroll; //竖向滚动
  overflow-x: scroll; //横向滚动

  .search {
    height: 100px;
    padding: 20px;
    background-color: var(--BlockBgColor);
    transition: background-color 0.3s var(--n-bezier);
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .form_select {
      width: 150px;
    }
  }

  .table {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--BlockBgColor);
    transition: background-color 0.3s var(--n-bezier);

    .table_action {
      height: 60px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
